<template>
    <view class="container">
      <!-- 轮播图 -->
      <swiper 
        class="banner" 
        indicator-dots 
        autoplay 
        circular
        :interval="3000"
        :duration="500"
      >
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <image :src="item.image" mode="aspectFill" class="banner-img" @click="navigateTo(item.url)"></image>
        </swiper-item>
      </swiper>
      
      <!-- 功能区 -->
      <view class="function-area">
        <view class="function-item" v-for="(item, index) in functionList" :key="index" @click="navigateTo(item.url)">
          <image :src="item.icon" mode="aspectFit" class="function-icon"></image>
          <view class="function-name">{{ item.name }}</view>
        </view>
      </view>
      
      <!-- 公告栏 -->
      <view class="notice-area">
        <view class="notice-title">
          <text class="iconfont icon-notice"></text>
          <text>最新公告</text>
        </view>
        <swiper class="notice-swiper" vertical autoplay circular :interval="3000" :duration="500">
          <swiper-item v-for="(item, index) in noticeList" :key="index">
            <view class="notice-item" @click="viewNotice(item)">{{ item.title }}</view>
          </swiper-item>
        </swiper>
      </view>
      
      <!-- 考试信息 -->
      <view class="section-title">最近考试</view>
      <view class="exam-list">
        <view v-if="upcomingExams.length === 0" class="empty-tip">暂无考试安排</view>
        <view v-else class="exam-item card" v-for="(item, index) in upcomingExams" :key="index" @click="viewExamDetail(item)">
          <view class="exam-name">{{ item.name }}</view>
          <view class="exam-info">
            <text class="exam-type">{{ getExamTypeName(item.exam_type) }}</text>
            <text class="exam-date">{{ formatDate(item.exam_date) }}</text>
          </view>
          <view class="exam-status">
            <text class="exam-deadline">报名截止: {{ formatDate(item.registration_deadline) }}</text>
            <text class="exam-applicants">已报名: {{ item.current_applicants }}/{{ item.max_applicants }}</text>
          </view>
        </view>
      </view>
      
      <!-- 学习进度 -->
      <view class="section-title">学习进度</view>
      <view v-if="!isLogin" class="card login-tip">
        <text>登录后查看学习进度</text>
        <button class="btn-primary" size="mini" @click="navigateTo('/pages/login/login')">立即登录</button>
      </view>
      <view v-else-if="!progress" class="card login-tip">
        <text>您还没有报名或学习记录</text>
        <button class="btn-primary" size="mini" @click="navigateTo('/pages/enrollment/apply/apply')">立即报名</button>
      </view>
      <view v-else class="progress-area card">
        <view class="progress-title">总体进度</view>
        <progress :percent="progress.total_progress" stroke-width="12" color="#3c8dbc" />
        <view class="progress-percent">{{ progress.total_progress }}%</view>
        <view class="subject-list">
          <view class="subject-item" v-for="(subject, key) in subjectProgress" :key="key">
            <view class="subject-name">{{ getExamTypeName(key) }}</view>
            <view class="subject-status" :class="getStatusClass(subject.status)">{{ getStatusText(subject.status) }}</view>
          </view>
        </view>
        <button class="btn-primary btn-block" @click="navigateTo('/pages/study/study')">查看详情</button>
      </view>
    </view>
  </template>
  
  <script>
  import { mapGetters, mapActions } from 'vuex';
  import { formatDate } from '@/utils/date';
  
  export default {
    data() {
      return {
        bannerList: [
          { image: '/static/images/banner1.jpg', url: '/pages/enrollment/apply/apply' },
          { image: '/static/images/banner2.jpg', url: '/pages/exam/schedule/schedule' },
          { image: '/static/images/banner3.jpg', url: '/pages/study/study' }
        ],
        functionList: [
          { name: '在线报名', icon: '/static/icons/enrollment.png', url: '/pages/enrollment/apply/apply' },
          { name: '教练选择', icon: '/static/icons/coach.png', url: '/pages/enrollment/coach-selection/coach-selection' },
          { name: '考试报名', icon: '/static/icons/exam.png', url: '/pages/exam/registration/registration' },
          { name: '学习记录', icon: '/static/icons/study.png', url: '/pages/study/study' }
        ],
        noticeList: [
          { id: 1, title: '关于2025年5月驾驶证考试安排通知', content: '各位学员，2025年5月驾驶证考试将于5月15日至30日进行，请提前做好准备并关注考试公告。' },
          { id: 2, title: '新版交通法规学习资料已更新', content: '请各位学员注意，新版交通法规学习资料已更新，请及时下载学习。' },
          { id: 3, title: '五一假期驾校教学安排', content: '五一假期期间，驾校将正常开放。5月1日至5日实习场地开放时间调整为9:00-16:00。' }
        ]
      };
    },
    computed: {
      ...mapGetters('user', [
        'isLogin'
      ]),
      ...mapGetters('exam', [
        'upcomingExams'
      ]),
      ...mapGetters('study', [
        'progress',
        'subjectProgress'
      ])
    },
    onLoad() {
      // 加载考试信息
      this.getExams();
      
      // 如果已登录，获取学习进度
      if (this.isLogin) {
        this.getStudyProgress();
      }
    },
    methods: {
      ...mapActions('exam', [
        'getExams'
      ]),
      ...mapActions('study', [
        'getStudyProgress'
      ]),
      navigateTo(url) {
        uni.navigateTo({
          url
        });
      },
      viewNotice(notice) {
        uni.showModal({
          title: notice.title,
          content: notice.content,
          showCancel: false
        });
      },
      viewExamDetail(exam) {
        uni.navigateTo({
          url: `/pages/exam/schedule/schedule?id=${exam.id}`
        });
      },
      formatDate(date) {
        return formatDate(date);
      },
      getExamTypeName(type) {
        const typeMap = {
          'subject1': '科目一',
          'subject2': '科目二',
          'subject3': '科目三',
          'subject4': '科目四'
        };
        return typeMap[type] || type;
      },
      getStatusText(status) {
        const statusMap = {
          'not_started': '未开始',
          'in_progress': '进行中',
          'completed': '已完成'
        };
        return statusMap[status] || status;
      },
      getStatusClass(status) {
        const classMap = {
          'not_started': 'status-not-started',
          'in_progress': 'status-in-progress',
          'completed': 'status-completed'
        };
        return classMap[status] || '';
      }
    }
  };
  </script>
  
  <style lang="scss">
  .container {
    padding: 20rpx;
  }
  
  .banner {
    width: 100%;
    height: 360rpx;
    border-radius: 16rpx;
    overflow: hidden;
    margin-bottom: 30rpx;
  }
  
  .banner-img {
    width: 100%;
    height: 100%;
  }
  
  .function-area {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 30rpx;
  }
  
  .function-item {
    width: 22%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20rpx;
  }
  
  .function-icon {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 10rpx;
  }
  
  .function-name {
    font-size: 24rpx;
    color: #333;
  }
  
  .notice-area {
    background-color: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;
  }
  
  .notice-title {
    display: flex;
    align-items: center;
    margin-right: 20rpx;
    color: #3c8dbc;
    font-weight: bold;
  }
  
  .notice-swiper {
    height: 60rpx;
    flex: 1;
  }
  
  .notice-item {
    line-height: 60rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    position: relative;
    padding-left: 20rpx;
    color: #333;
  }
  
  .section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8rpx;
    height: 32rpx;
    width: 8rpx;
    background-color: #3c8dbc;
    border-radius: 4rpx;
  }
  
  .exam-list {
    margin-bottom: 30rpx;
  }
  
  .exam-item {
    margin-bottom: 20rpx;
  }
  
  .exam-name {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 16rpx;
  }
  
  .exam-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16rpx;
    font-size: 28rpx;
    color: #666;
  }
  
  .exam-status {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #999;
  }
  
  .empty-tip {
    text-align: center;
    padding: 40rpx 0;
    color: #999;
  }
  
  .login-tip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 20rpx;
  }
  
  .progress-area {
    padding: 30rpx 20rpx;
  }
  
  .progress-title {
    margin-bottom: 20rpx;
    font-weight: bold;
  }
  
  .progress-percent {
    text-align: center;
    font-size: 24rpx;
    color: #3c8dbc;
    margin: 10rpx 0 20rpx;
  }
  
  .subject-list {
    margin-bottom: 20rpx;
  }
  
  .subject-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16rpx;
    padding-bottom: 16rpx;
    border-bottom: 1px solid #eee;
  }
  
  .subject-item:last-child {
    border-bottom: none;
  }
  
  .subject-name {
    font-size: 28rpx;
  }
  
  .subject-status {
    font-size: 24rpx;
    padding: 4rpx 16rpx;
    border-radius: 20rpx;
  }
  
  .status-not-started {
    background-color: #eee;
    color: #999;
  }
  
  .status-in-progress {
    background-color: #e6f7ff;
    color: #1890ff;
  }
  
  .status-completed {
    background-color: #e6f7f0;
    color: #52c41a;
  }
  
  .btn-block {
    width: 100%;
    margin-top: 20rpx;
  }
  </style>